<template>
  <div class="marquee-container">
    <!--    <vue3-marquee :duration="150">{{ message }}</vue3-marquee>-->
    <div class="header">果园简介</div>
    <div class="flex items-center justify-between">
      <div class="desc-item">
        <div class="desc-title">企业法人</div>
        <div class="desc-value">陈小友</div>
      </div>
      <div class="desc-item">
        <div class="desc-title">注册资金</div>
        <div class="desc-value">50万人民币</div>
      </div>
      <div class="desc-item">
        <div class="desc-title">经营情况</div>
        <div class="desc-value flex items-center !justify-around situation-list">
          <div v-for="(item, index) in situationList" :key="index" class="situation">
            <!--            <div class="value">{{ item.value }}</div>-->
            <!--            <div class="label">{{ item.label }}</div>-->
            <img :alt="item.label" :src="item.image" class="image" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  // import { Vue3Marquee } from 'vue3-marquee'
  import { ref } from 'vue'
  import { getAssetsFile } from '@/utils'
  // import 'vue3-marquee/dist/style.css'

  const message = ref(
    '2013年2月，一群80后的年轻人在姚西粮食主产区马渚镇成立了余姚市英苗农机服务专业合作社,注册资金500万元，并在“省级万亩示范方”内流转土地5200多亩，开始以水稻种植为主的农机化作业服务。合作社在大学生理事长朱涛的带领下，发展社员28人，购置各类先农业机械216台，新建农机库房4190平方米，下设农机培训教室、粮食烘干中心、农机维修中心、粮食加工中心、农产品展示区、农耕文化展览区、党员活动室、农资超市等多个附属功能区，年农机社会化服务面积超过75000亩次，年营业额达1750多万元。七年来，合作社以“发展现代农业、助力农民增收”为己任，不断创造佳绩，2014年被评为余姚市规范化合作社，2017年被评为宁波系统示范合作社，2018年被评为浙江省示范合作社,从2019年度宁波市示范性农业社会化服务组织，2020年被评为余姚市科普教育基地。合作社成立以来，我们始终秉承“机器换人”的理念，始终走在农业生产第一线，筹集资金新建各类农业施设，购置高性能农业机械，为社员与农户提供耕地、插秧、植保、收割、烘干、加工等粮食生产全程机械化服务，并在2018年建起了“农资超市”、\n' +
      '“培训教室”、“农产品展示区”，发展“基层农事服务中心”，为周边农户提供技术咨询、业务培训、农机作业、产品销售等全方位服务，从产供销等多个环节助农增收。合作社在方便农户的同时经营收入也大幅上升，2019年经营收入1752万元，实现利润182万元。2020年经营收入2130万元，实现利润226万元，社员年收入普遍在30万元以上，并带动更多青年农民在广阔的田野上创业致富，为产业兴旺和乡村振兴注入更多青春活力。'
  )

  const situationList = ref([
    { label: '财产线索', value: 11, image: getAssetsFile('business-case/1.png') },
    { label: '新闻舆情', value: 1, image: getAssetsFile('business-case/2.png') },
    { label: '行政许可', value: 1, image: getAssetsFile('business-case/3.png') },
    { label: '资质证书', value: 2, image: getAssetsFile('business-case/4.png') },
    { label: '招投标', value: 3, image: getAssetsFile('business-case/5.png') }
  ])
</script>

<style lang="scss" scoped>
  .marquee-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    width: 774px;
    height: 172px;
    background: url('@/assets/images/farm-desc/wrapper-bg.png') no-repeat top;
    background-size: 100% 100%;
    z-index: 100;

    .header {
      width: 634px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      font-weight: bold;
      color: #fff;
      letter-spacing: 8px;
      background: url('@/assets/images/farm-desc/wrapper-header-bg.png') no-repeat top;
      background-size: 100% 100%;
    }
    .desc-item {
      margin: 16px 6px 0;
      width: 236px;
      .desc-title {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        color: #172a88;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 4px;
        background: url('@/assets/images/farm-desc/desc-item-title-bg.png') no-repeat top;
        background-size: 100% 100%;
      }
      .desc-value {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        font-size: 18px;
        letter-spacing: 4px;
        background: url('@/assets/images/farm-desc/desc-item-value-bg.png') no-repeat top;
        background-size: 100% 100%;
      }
      .situation-list {
        letter-spacing: 0;
        font-size: 12px;
        padding: 0 4px;
        .situation {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          //padding-top: 6px;
          height: 40px;
          width: 40px;
          //background: url('@/assets/images/wrapper-bg/3.png') no-repeat top;
          //background-size: 100% 100%;
          .value {
            font-size: 14px;
            font-weight: bold;
            line-height: 0.8;
          }
          .label {
            color: #00d9ff;
            white-space: nowrap;
            font-size: 10px !important;
            transform: scale(0.5);
            line-height: 1.2;
          }
          .image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>
